<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <link rel="stylesheet" href="flex.css">
    </head>
    <body>
        <div class="box">
            <div class="column">
                <span class="item"></span>
                <span class="item"></span><!--span为内行元素，一个行内元素只占据它对应标签的边框所包含的空间，div为块状元素
                                      一般情况下，行内元素只能包含数据和其他行内元素。而块级元素可以包含行内元素和其他块级元素。
                                     这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。格式默认情况下，行内元素不会以新行开始，而块级元素会新起一行-->
                <span class="item"></span>
            </div>
            <div class="column">
                <span class="item"></span>
                <span class="item"></span>
                <span class="item"></span>
            </div>
            <div class="column">
                <span class="item"></span>
                <span class="item"></span>
                <span class="item"></span>
            </div>
        </div>
        <span class="text"> </span>
    </body>

</html>







































